<template>
  <view class="template-about tn-safe-area-inset-bottom">
    
    <view class="top-backgroup"></view>
    
    
    <view class="about__wrap">

      <view class="tn-flex tn-flex-row-between tn-flex-col-center ">
        <view class="justify-content-item">
          <view class="tn-flex tn-flex-col-center tn-flex-row-left" @tap="turnUrl">
            <!-- 图标logo -->
            <view class="logo-pic tn-shadow" >
              <view class="logo-image">
                <view class="tn-shadow-blur" :style="{ backgroundImage: 'url(' + userInfo.avatar + ');width: 82rpx;height: 82rpx;background-size: cover;' }" >
                </view>
              </view>
            </view>
            <view class="tn-padding-right tn-color-white">
              <view class="tn-padding-right tn-padding-left-sm nickname">
                {{userInfo.nickname}}
              </view>
              <view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis idline">ID:{{userInfo.id}}</view>
            </view>
            
          </view>
        </view>
      </view>
      
      <!-- 更多信息-->
      <view class=" tn-margin-top  tn-padding-bottom-sm tn-color-black ">
		  
		<view class="user_block " v-for="item in menu" >
			<view class="block_header">
				<view class="block_title">
					<view class="title">{{item.title}}</view>
					<view class="en_title">{{item.en}}</view>
				</view>
				<view class="block_right">>>></view>
			</view>
			<view class="block_content">
				<view @tap="turnTo(btn)" :class="[btn.size==1 ? 'big' : '',  'menu', index%2==0?'tn-float-left':'tn-float-right']" v-for="(btn, index) in item.children">
					<view class="btn_title">{{btn.title}}</view>
					<view class="btn_en_title">{{btn.en}}</view>
				</view>
			</view>
		</view>
    </view>
	</view>
    
    <view class="tn-padding-xl"></view>
    
    <!-- 回到首页悬浮按钮-->
    <!-- <nav-index-button></nav-index-button> -->
    
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import NavIndexButton from '@/libs/components/nav-index-button.vue'
  import {menu, info} from '@/api/user/index.js'
  import {checkLogin} from '@/util/common.js'
  
  
import store from '../../store'
  export default {
    name: 'user-index',
    mixins: [template_page_mixin],
    components: { NavIndexButton },
    data(){
      return {
		userInfo:{
			nickname:"布芒的家",
			id:"1000000",
			avatar:"http://static.m521.cn/images/missing-face.png"
		},
		menu:[]
      }
    },
	mounted() {
		console.log(store.state)
		this.userInfo = store.state?.vuex_user || this.userInfo
		if(this.userInfo.token){
			this.userInfo.id = this.userInfo.token.split("-")[0]
		}
		this.getUserInfo()
		this.menuList()
		
	},
    methods: {
		getUserInfo(){
			info().then(res=>{
				this.userInfo = res
			})
		},
	  menuList(){
		  menu().then(res=>{
			  
			  res.map(item=>{
				  
				  item.children.map(re=>{
					 console.log(re.title)
					 console.log(this.userInfo.is_mentor)
					 if(this.userInfo.is_mentor && re.title == '导师申请'){
						re.title = '导师中心';
						re.en= 'Mentor Center'
						re.url="/pages/user/mentor/mentor"
					 }
					 
					 if(this.userInfo.is_qz && re.title == '合作入驻'){
						re.title = '社群主中心';
						re.en= 'Activity Center'
						re.url="/pages/user/activity/activity"
					 } 
				  })
			  })
			  
			
			  this.menu = res
		  })
	  },
	  turnUrl(){
		uni.navigateTo({
		  url: '/pages/user/setting'
		}) 
	  },
	  turnTo(btn){
		  if(checkLogin()){
			if(btn.url){
				uni.navigateTo({
				  url: btn.url
				})  
			}  
		  }
	  },
      // 跳转到
      navTuniaoHome(e) {
        wx.vibrateLong();
        uni.navigateTo({
          url: '/pages/index/index'
        })
      },
	  
	  navAdvice(){
		  uni.navigateTo({
		    url: '/pages/user/advice'
		  })
	  },
	  navAbout(){
		  uni.navigateTo({
			url: '/pages/user/about'
		  })
	  },
	  navSetting(){
		  uni.navigateTo({
			url: '/pages/user/setting'
		  })
	  },
	  navLink(){
		  uni.navigateTo({
		  	url: '/pages/user/link'
		  })
	  }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/css/templatePage/custom_nav_bar.scss';
  .template-about{
  }
  .iconColor{color: #01e0f2;}
  .tn-bg-common{background: linear-gradient(to bottom,#e5f5f5, #e0f0f9) }
  
  .tn-text-ellipsis{font-size: 12px;}
  .justify-content-item{font-size: 12px;color: #fff;}
  
  .user_block{
	  border-radius: 15rpx;background: #fff;
	  padding: 31rpx 22rpx;
	  margin-bottom:33rpx ;
	  .block_header{
		  display: flex;
		  justify-content: space-between;
		  color: $tn-main-orange;
		  
		  .block_title{
			  text-align: left;
			  font-weight: bold;
			  .title{
				  font-size: 36rpx;
			  }
			  
			  .en_title {
				font-size: 14rpx; 
			  }
		  }
	  }
	  
	  .block_content{
		  overflow: hidden;
		.menu{
			border-radius: 15rpx;
			padding: 21rpx 19rpx;
			font-size: 30rpx;
			margin-top: 16rpx;
			font-weight: bold;
			color: #666;
			border: 1px solid $tn-main-orange;
			text-align: left;
			width: 46%;
			display: inline-block;
			.btn_en_title{
				font-size: 14rpx;
			}
		} 
		.menu.big{width: 100%;}
	  }
  }
  
  /* 顶部背景图 start */
  .top-backgroup {
    height: 380rpx;
    z-index: -1;
  }
  /* 顶部背景图 end */
  
  /* 用户头像 start */
  .logo-image{
    width: 82rpx;
    height: 82rpx;
    position: relative;
  }
  .logo-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 50%;
    overflow: hidden;
    background-color: #FFFFFF;
  }
  
  /* 页面 start*/
  .about-shadow{
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	font-family: "微软雅黑";
  }
  
  .about {
    
    &__wrap {
      position: relative;
      z-index: 1;
      margin-top: -230rpx;
    }
  }
  /* 页面 end*/
  
	.idline{color: #666666;}
	.nickname{font-size: 24rpx;font-weight: bold;color: #333333;}
    
</style>
